<template>
  <div class="monents-pages">
    <cp-nav-bar title="朋友圈" left-arrow>
      <template #right>
        <van-button type="danger" size="small" round @click="toMonents">
          <van-icon name="plus" color="white" />
          发动态</van-button
        >
      </template>
    </cp-nav-bar>
    <template v-for="(item, index) in monentList" :key="item.post_id">
      <MonentsCardSimple
        v-if="item.image_urls.length === 1"
        :data="item"
        @like-click="triggerClick($event, index)"
        @delete-post="getPostData"
        @share-post="getPostData"
      ></MonentsCardSimple>
      <MonentsCard
        v-else
        :data="item"
        @like-click="triggerClick($event, index)"
        @delete-post="getPostData"
        @share-post="getPostData"
      ></MonentsCard>
    </template>
  </div>
</template>
<script setup lang="ts">
import MonentsCardSimple from './components/Monents-card-simple.vue'
import MonentsCard from './components/Monents-card.vue'
import { getPost } from '@/services/monents'
import { useRouter } from 'vue-router'
const router = useRouter()
import { ref } from 'vue'
type monentsType = {
  author_avatar: string
  author_name: string
  comment_count: number
  content: string
  created_at: string
  image_urls: string[]
  is_liked: boolean
  like_count: number
  post_id: number
  user_id: string
}
const monentList = ref<monentsType[]>()
const toMonents = () => {
  router.push('/addMonents')
}
const getPostData = async () => {
  const res = await getPost()
  console.log(res)
  monentList.value = res.data as monentsType[]
}
getPostData()
const triggerClick = (value: boolean, index: number) => {
  if (monentList.value) {
    monentList.value[index].is_liked = value
  }
}
</script>
<style lang="scss" scoped>
.monents-pages {
  padding-top: 46px;
  background-color: var(--bg-primary);
  box-sizing: border-box;
  height: 100vh;
}
</style>
